<template>
  <div class="login-page">
    <div class="slogan">海量商品，优惠不断，畅享购物新体验！</div>
    <div class="login-container">
      <h2 class="text">Log in</h2>
      <form @submit.prevent="handleLogin" novalidate>
        <label for="username">用户名：</label>
        <div class="input-icon-group">
          <input type="text" id="username" v-model="username" required />
          <i class="iconfont icon-xiaoren"></i>
        </div>
        <label for="password">密码：</label>
        <div class="input-icon-group">
          <input type="password" id="password" v-model="password" required />
          <i class="iconfont icon-mimasuo"></i>
        </div>
        <div class="inline-group">
          <input type="checkbox" id="remember" v-model="rememberMe" />
          <label for="remember">记住我</label>
        </div>
        <div>
          <button type="submit">登录</button>
        </div>
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </form>
      <div class="go-register">
        <p>没有账号？<router-link to="/register">去注册</router-link></p>
      </div>
      <div class="go-register">
        <p>我是管理员,<router-link to="/admin-login">管理员入口</router-link></p>
      </div>
      <!-- 添加购物车图标 -->
      <div class="cart-icon">
        <i class="iconfont icon-gouwuche"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores'
import showPrompt from '@/utils/showPrompt'

export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false,
      errorMessage: '',
      user_login_info: JSON.parse(localStorage.getItem('user_login_info')) || []
    }
  },
  mounted() {
    const savedUsername = localStorage.getItem('username')
    const savedPassword = localStorage.getItem('password')
    if (savedUsername && savedPassword) {
      this.username = savedUsername
      this.password = savedPassword
      this.rememberMe = true
    }
  },
  methods: {
    handleLogin() {
      if (!this.username.trim() || !this.password.trim()) {
        this.errorMessage = '用户名和密码不能为空'
        return
      }
      if (!this.findUserId(this.username)) {
        return showPrompt('找不到该用户', 'error')
      }
      if (this.findUserId(this.username).pwd !== this.password) {
        return showPrompt('密码错误', 'error')
      }
      this.errorMessage = ''
      console.log('登录信息：', { username: this.username, password: this.password })
      if (this.rememberMe) {
        localStorage.setItem('username', this.username)
        localStorage.setItem('password', this.password)
      } else {
        localStorage.removeItem('username')
        localStorage.removeItem('password')
      }
      showPrompt('登录成功', 'success')
      const path = this.$route.query.redirect
      const userStore = useUserStore()
      userStore.setUserId(this.username)
      if (path) {
        this.$router.push(path)
      } else {
        this.$router.push('/')
      }
    },
    findUserId(uname) {
      const result = this.user_login_info.find(item => item.userId === uname)
      return result
    }
  }
}
</script>

<style scoped>
.error-message {
  font-size: 20px;
  color: red;
}
.login-container {
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  width: 400px;
  height: 400px;
  position: relative;
  z-index: 1;
}
.inline-group {
  display: flex;
  align-items: center;
}
.inline-group label {
  flex: 0 0 auto;
}
.inline-group input {
  width: auto;
}
label {
  display: block;
  margin-bottom: 5px;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid #ccc;
}

.go-register a {
  text-decoration: none;
  color: purple;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.input-icon-group {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 与下一个元素的间距 */
}

.input-icon-group input {
  flex: 1; /* 输入框占据剩余空间 */
  margin-bottom: 0; /* 移除原有的底部外边距 */
}

.input-icon-group .iconfont {
  margin-left: 10px; /* 图标与输入框的间距 */
  font-size: 20px;
}

.login-page {
  min-height: calc(100vh - 80px);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #b0c42d);
  background-size: 500% 500%;
  animation: gradient 10s ease infinite;
  /* 添加 flexbox 布局 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: relative;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text {
  display: flex;
  justify-content: center;
  font-size: 40px;
  color: transparent;
  letter-spacing: 5px;
  background: linear-gradient(to right, #729335 0, #decc2c 20%, #dbe4d5 40%);
  background-position: -32px 0;
  background-clip: text;
  animation: eff 3s linear infinite;
}
@keyframes eff {
  to {
    background-position: 500px 0;
    /* 动画结束时，设置背景渐变的位置向右移动到500像素，从而创建流光效果 */
  }
}

.slogan {
  font-size: 18px;
  color: white;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
</style>
